<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body style="height:1500px;">
  <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top " (click)="formActive = false">
    <!-- Brand/logo -->
    <a class="navbar-brand " href="#" style="width:150px;margin-left:4% ;">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Links -->
    <ul class="navbar-nav collapse navbar-collapse">
      <li class="nav-item">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">吃喝</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">玩乐</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关注公众号</a>
      </li>
      <form class="form-inline collapse navbar-collapse">
        <input type="text" class="form-control" style="height:30px;" (click)="$event.stopPropagation(); c(true)"
          [class.click]="formActive" data-toggle="popover" data-placement="bottom" data-content="Content" />
        <span class="input-group-btn" style="padding:5px;">
          <button class="btn btn-warning btn-3d btn-sm" type="button">
            搜索
          </button>
        </span>
      </form>
      <a href="#" class="btn btn-link btn-sm" role="button">注册</a>
      <a href="#" class="btn btn-link btn-sm" role="button">登录</a>
      <a href="#" class="btn btn-danger btn-sm" role="button" style="margin-left:20px;">写文章</a>
    </ul>
  </nav>
  <div class="container index" (click)="formActive = false">
    <div class="row">
      <div class="col-xs-16 main">
        <div id="demo" class="carousel slide" data-ride="carousel">
          <!-- 指示符 -->
          <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
          </ul>

          <!-- 轮播图片 -->
          <div class="carousel-inner">
            <div class="carousel-item" *ngFor="let item of sidelist;let i= index" [ngClass]="{'active':i == 0}">
              <img src="{{item.src}}" style="width:100%;height: 230px;" />
            </div>
          </div>
          <!-- 左右切换按钮 -->
          <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
        <div class="split-line"></div>
        <div id="list-container">
          <!-- 文章列表模块 -->
          <ul class="note-list" infinite-scroll-url="/" *ngFor="let item of notelist">
            <li class="have-img li-font">
              <a class="wrap-img" href="{{item.url}}" target="_blank">
                <img class="img-blur-done" src="{{item.imagepath}}" alt="120" />
              </a>
              <div class="content">
                <a class="title" target="_blank" style="color:#333;" href="{{item.url}}">{{item.title}}</a>
                <p class="abstract">
                  {{item.content}}
                </p>
                <div class="meta">
                  <span class="jsd-meta">
                    <i class="fa fa-diamond" aria-hidden="true"></i>{{item.hot}}
                  </span>
                  <a class="nickname" target="_blank" href="{{item.url}}">{{item.auth}}</a>
                  <a target="_blank" href="{{item.url}}">
                    <i class="fa fa-comments" aria-hidden="true"></i> {{item.words}}
                  </a>
                  <span>
                    <i class="fa fa-thumbs-up" aria-hidden="true"></i> {{item.laud}}
                  </span>
                  <span><i class="iconfont ic-list-money"></i> {{item.money}}</span>
                </div>
              </div>
            </li>
          </ul>
          <!-- 文章列表模块 -->
        </div>
      </div>

      <div class="col-xs-7 col-xs-offset-1 aside">
        <div class="board">
          <!-- <a target="_blank" href="/mobile/club"><img
              src="//cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png" alt="Banner s club"
              style="width:100%;" /></a>
          <a utm_medium="index-banner-s" target="_blank" href="/mobile/books?category_id=284"><img
              src="//cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png" alt="Banner s 7"
              style="width:100%;" /></a>
          <a utm_medium="index-banner-s" target="_blank" href="/publications"><img
              src="//cdn2.jianshu.io/assets/web/banner-s-5-4ba25cf5041931a0ed2062828b4064cb.png" alt="Banner s 5"
              style="width:100%;" /></a>
          <a target="_blank" href="/c/e048f1a72e3d?utm_medium=index-banner-s&amp;utm_source=desktop"><img
              src="//cdn2.jianshu.io/assets/web/banner-s-6-c4d6335bfd688f2ca1115b42b04c28a7.png" alt="Banner s 6"
              style="width:100%;" /></a> -->
          <a target="_blank" *ngFor="let item of adlist" href="{{item.url}}"><img src="{{item.src}}" alt="Banner s 6"
              style="width:100%;" /></a>
        </div>
      </div>
      <!-- 推荐作者 -->
    </div>
  </div>

  <!-- <app-nav #nav (click)="clickNav()"></app-nav>
      <app-content (click)="clickNav()"></app-content> -->
</body>

</html>